<template>
	<view class="curry-content">
		<!-- 导航栏 -->
		<view class="search-header">
			<view @click="handeleTo">
				<image style="width: 60rpx;height: 60rpx;margin-bottom: -15rpx;" src="@/static/index2/index17.png"
					mode=""></image>
			</view>
			<view style="color: #1D1D1D;font-size: 32rpx;margin-right: 10rpx;margin-bottom: -15rpx;">{{$t('货物详情')}}
			</view>
			<view></view>
		</view>
		<view class="curry-content-header">
			<view @click="handeleItem(index)" :class="index==indexID?'header-item':'header-item-active'"
				v-for="(item,index) in headers" :key="index">{{$t(item)}}</view>
		</view>
		<!-- 货物信息 -->
		<view v-if="indexID==0" class="curry-block">
			<!-- 公司名称 -->
			<view style="width: 574rpx;height: 48rpx;display: flex;align-items: center;justify-content: space-between;">
				<image style="width: 64rpx;height: 30rpx;" src="@/static/index2/20241101152111.png" mode=""></image>
				<view @longpress="onLongPress(model.release_user)" @touchend="onTouchEnd" class="companyText">
					{{lang=='zh'?model.release_user.username:model.release_user.username_ru}}
				</view>
				<image style="width: 64rpx;height: 30rpx;" src="@/static//index2/20241101152115.png" mode=""></image>
			</view>
			<!-- 出发与目的地 -->
			<view class="curry-citry">
				<view class="curry-citry-countrys">
					<view style="display: flex;align-items: center;height: 24rpx;">
						<image v-if="model.data.departure_country==0" style="width: 40rpx;height: 24rpx;"
							src="@/static/ic0.png" mode=""></image>
						<image v-if="model.data.departure_country==1" style="width: 40rpx;height: 24rpx;"
							src="@/static/ic1.png" mode=""></image>
						<span style="margin-left: 10rpx;" v-if="model.data.departure_country==0">{{$t('中国')}}</span>
						<span style="margin-left: 10rpx;" v-if="model.data.departure_country==1">{{$t('俄罗斯')}}</span>
					</view>
					<view style="display: flex;align-items: center;height: 24rpx;">
						<image v-if="model.data.reach_country==0" style="width: 40rpx;height: 24rpx;"
							src="@/static/ic0.png" mode=""></image>
						<image v-if="model.data.reach_country==1" style="width: 40rpx;height: 24rpx;"
							src="@/static/ic1.png" mode=""></image>
						<span style="margin-left: 10rpx;" v-if="model.data.reach_country==0">{{$t('中国')}}</span>
						<span style="margin-left: 10rpx;" v-if="model.data.reach_country==1">{{$t('俄罗斯')}}</span>
					</view>
				</view>
				<view style="margin-top: 17rpx;margin-bottom: 24rpx;">
					<view class="curry-line"></view>
				</view>
				<view class="curry-citry-bottom">
					<view style="line-height:35rpx;text-align: left;width:45%;">
						{{lang=='zh'?model.data.departure.mergename:model.data.departure.mergename_ru}}
					</view>

					<!-- <view style="color: #004CFF;width: 150rpx;;line-height:35rpxtext-align: center;line-height: 1;">{{$t('直达')}}</view> -->
					<image style="width: 15rpx;height: 20rpx;" src="@/static/right3.png" mode="">
					</image>

					<view style="line-height:35rpx;text-align: right;width:45%">
						{{lang=='zh'?model.data.reach.mergename:model.data.reach.mergename_ru}}
					</view>

				</view>
			</view>
			<view class="currys-block">
				<view>{{$t('始发详细地址')}}</view>
				<view>
					{{lang=='zh'?model.data.departure_address?model.data.departure_address:$t('不限'):model.data.departure_address_ru?model.data.departure_address_ru:$t('不限')}}
				</view>
			</view>
			<view class="currys-block1">
				<view>{{$t('到达详细地址')}}</view>
				<view>
					{{lang=='zh'?model.data.reach_address?model.data.reach_address:$t('不限'):model.data.reach_address_ru?model.data.reach_address_ru:$t('不限')}}
				</view>
			</view>
			<view class="currys-block1">
				<view>{{$t('货物名称')}}</view>
				<view style="flex: 1;margin-left: 20rpx;text-align: end;">
					{{lang=='zh'?model.data.goods_name?model.data.goods_name:'-':model.data.goods_name_ru?model.data.goods_name_ru:'-'}}
				</view>
			</view>
			<view class="currys-block1">
				<view>{{$t('大概总重量')}}</view>
				<view>
					<span>{{lang=='zh'?model.data.goods_weight?model.data.goods_weight:0:model.data.goods_weight_ru?model.data.goods_weight_ru:0}}</span>
					<span>kg</span>
				</view>
			</view>
			<view class="currys-block1">
				<view>{{$t('大概总体积')}}</view>
				<view>
					{{lang=='zh'?model.data.goods_volume?model.data.goods_volume:0:model.data.goods_volume_ru?model.data.goods_volume_ru:0}}m³
				</view>
			</view>
			<view class="currys-block1">
				<view>{{$t('尺寸信息')}}</view>
				<view v-if="model.data.goods_l !== '' && model.data.goods_l !== '0' || 
            model.data.goods_w !== '' && model.data.goods_w !== '0' || 
            model.data.goods_h !== '' && model.data.goods_h !== '0'">
					{{model.data.goods_l?model.data.goods_l:0}}×{{model.data.goods_w?model.data.goods_w:0}}×{{model.data.goods_h?model.data.goods_h:0}}m
				</view>
				<view v-else>--</view>
			</view>
			<view class="currys-block1">
				<view>{{$t('需求数量')}}</view>
				<view>
					{{lang=='zh'?model.data.goods_num?model.data.goods_num:0:model.data.goods_num_ru?model.data.goods_num_ru:0}}
					{{lang=='zh'?model.data.number_unit:model.data.number_unit_ru}}
				</view>
			</view>
			<view class="currys-block1">
				<view>{{$t('所需车型')}}</view>
				<view v-if="model.data.category">{{lang=='zh'?model.data.category.name:model.data.category.name_ru}}
				</view>
				<view v-else>-</view>
			</view>
			<view class="currys-block1">
				<view>{{$t('发货时间')}}</view>
				<view>{{model.data.give_install_date?model.data.give_install_date:'-'}}</view>
			</view>
			<view class="currys-block2" :class="{four:this.lang=='ru'}">
				<view class="currys-block2_block">
					<view :class="lang=='zh'?'dayss':'dayss_ru'">{{$t('期望速度')}}</view>
					<view style="color: #1D1D1D;font-size: 26rpx;">{{model.data.desire_speed}}{{$t('天')}}</view>
				</view>
				<view class="currys-block2_block">
					<view :class="lang=='zh'?'dayss':'dayss_ru'">{{$t('期望运费总价')}}</view>
					<view style="color: #1D1D1D;font-size: 26rpx;">
						{{model.data.freight_price?model.data.freight_price:0}}{{$t(model.data.price_unit?model.data.price_unit:'-')}}
					</view>
				</view>
				<view class="currys-block2_block">
					<view :class="lang=='zh'?'dayss':'dayss_ru1'">{{$t('是否缴纳保证金')}}</view>
					<view style="color: #1D1D1D;font-size: 26rpx;">{{model.data.is_margin==2?$t('是'):$t('否')}}</view>
				</view>
				<view class="currys-block2_block" v-if="model.data.is_margin==2">
					<view :class="lang=='zh'?'dayss':'dayss_ru1'">{{$t('保证金')}}</view>
					<view style="color: #1D1D1D;font-size: 26rpx;">{{model.data.margin_price?model.data.margin_price:0}}
						{{$t(model.data.price_unit)}}
					</view>
				</view>
			</view>
			<!-- 即时沟通 -->
			<view class="index1_xq4">
				<view style="width: 196rpx;height: 60rpx;">
					<u-button :disabled="communicateDisabled" style="font-size: 22rpx;" type="success" shape="circle"
						class="index_xq1" @click.stop="handeleUninterested">{{$t('不感兴趣')}}</u-button>
				</view>

				<view style="width: 196rpx;height: 60rpx;margin-left: 21rpx;">
					<u-button :disabled="communicateDisabled" style="font-size: 22rpx;" type="success" shape="circle"
						class="index_xq2" @click.stop="handeleWanttobuy">{{$t('参与竞标')}}</u-button>
				</view>

				<view style="width: 196rpx;height: 60rpx;margin-left: 21rpx;">
					<u-button :disabled="communicateDisabled" style="font-size: 22rpx;" type="success" shape="circle"
						class="index_xq3" @click.stop="handeleCommunicate">{{$t('即时沟通')}}</u-button>
				</view>
			</view>
		</view>



		<!-- 图片 -->
		<view style="width: 690rpx;height: 40rpx;display: flex;align-items: center;margin-top: 35rpx;"
			v-if="indexID == 1">
			<image style="width: 40rpx;height: 40rpx;" src="@/static/index2/images.png" mode=""></image>
			<span style="font-size: 30rpx;color: #000000;margin-left: 8rpx;">{{$t('商品详情图片')}}</span>
		</view>
		<view v-if="indexID==1" class="currys-images">
			<scroll-view scroll-y="true" class="scroll-Y">
				<image style="width: 630rpx;border-radius: 32rpx;margin-bottom: 24rpx;"
					:src="IMAGE_URL+model.data.images" mode="widthFix"></image>
			</scroll-view>
		</view>
		<vipPopup v-if="vipShow" :show="vipShow" @handeleVip="clickVipPopup" />
		<u-popup v-model="show" mode="center" border-radius="32">
			<view class="longPressTextClass">{{longPressText}}</view>
		</u-popup>
	</view>
</template>

<script>
	import vipPopup from "@/components/vipPopup/index.vue";
	import {
		createC2CConversation,
		isBase64,
		time
	} from "@/common/public";
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		components: {
			vipPopup
		},
		data() {
			return {
				IMAGE_URL,
				communicateDisabled: false,
				longPressText: '',
				show: false,
				indexID: 0,
				headers: [
					'基本信息',
					'更多信息'
				],
				model: {},
				lang: 'zh',
				vip: false,
				vipShow: false,
			}
		},
		onLoad(options) {
			this.getLang()
			// 使用decodeURIComponent对URL参数进行解码
			let items = decodeURIComponent(options.items);
			this.model = JSON.parse(items)
			this.log(this.model, true);
		},
		methods: {
			// 长按
			onLongPress(item) {
				this.show = true
				if (this.lang == 'zh') {
					this.longPressText = item.username
				} else {
					this.longPressText = item.username_ru
				}
			},
			// 松开
			onTouchEnd() {
				this.show = false
			},
			// 隐藏vip弹窗
			clickVipPopup() {
				this.vipShow = false //点击vip弹窗隐藏
			},
			//参与竞标
			handeleWanttobuy() {
				this.communicateDisabled = true
				setTimeout(() => {
					this.communicateDisabled = false
				}, 2000)
				// 先判断手机号，如果使自己手机号，自己不能和参与
				var mobile = uni.getStorageSync('mobile');

				if (mobile === this.model.release_user.mobile) {
					this.$u.toast(this.$t('不能参与自己'));
					return
				}
				this.$u.api.user.order_join_day_auth({
					lang: this.lang
				}).then(res => {
					if (res == 1) {
						//参与竞标
						uni.navigateTo({
							url: "/pages/order/process/buildOrder?type=transport&release_id=" + this.model.data
								.id
						})
					} else {
						if (this.vip) {
							this.vipShow = true
							return
						} else {
							uni.showModal({
								content: this.$t('您的权限不足哦!请联系工作人员!'),
								showCancel: false,
								confirmText: this.$t('是'),
							})
							return false;
						}
						return
					}
				})

			},
			// 即时沟通
			handeleCommunicate() {
				this.communicateDisabled = true
				setTimeout(() => {
					this.communicateDisabled = false
				}, 2000)
				createC2CConversation(this.model.release_user.mobile, this)
			},
			// 不感兴趣
			handeleUninterested() {
				uni.showModal({
					title: this.$t('提示'),
					content: this.$t('感谢您反馈的信息，我们会努力优化推送内容。'),
					confirmText: this.$t('确认'),
					cancelText: this.$t('取消'),
					success: res => {
						if (res.confirm) {
							this.communicateDisabled = true
							let data = {
								id: this.model.id,
								content: '',
								reason: ''

							}
							this.$u.api.basic.setRefuse(data).then(res => {
								this.communicateDisabled = false
								uni.showToast({
									icon: 'none',
									title: this.$t('操作成功')
								})

								this.$eventBus.$emit('getId', 12)
								setTimeout(() => {
									uni.navigateBack()
								}, 800)
							})
						} else if (res.cancel) {}
					}
				});

			},
			handeleItem(index) {
				this.indexID = index
			},
			handeleTo() {
				uni.navigateBack()
			},
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
			},
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("详情")
			})
		},
	}
</script>

<style scoped>
	.dayss_ru1 {
		color: #999999;
		font-size: 22rpx;
		white-space: normal;
		word-wrap: break-word;
		line-height: 1;
		min-height: 30rpx;
		text-align: center;
	}

	.dayss_ru {
		color: #999999;
		font-size: 22rpx;
		white-space: normal;
		word-wrap: break-word;
		line-height: 1;
		min-height: 30rpx;
		text-align: center;
		margin-bottom: 15rpx;
	}

	.longPressTextClass {
		width: 650rpx;
		min-height: 100rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.companyText {
		width: 400rpx;
		font-size: 32rpx;
		color: #1D1D1D;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.dayss {
		color: #999999;
		font-size: 22rpx;
		white-space: normal;
		word-wrap: break-word;
		line-height: 1;
		min-height: 30rpx;
		text-align: center;
	}

	.search-header {
		z-index: 2;
		width: 690rpx;
		height: 103rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
		margin-bottom: -20rpx;
	}

	.card-zz {
		min-width: 70rpx;
		height: 70rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}

	.card-zzlfcx {
		width: 65%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.card_Route {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.card_images1-bottom {
		flex: 1;
		width: 100%;
		height: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 16rpx;
	}

	.card_images1 {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background-color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card_detail1 {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.card_detail {
		width: 630rpx;
		min-height: 212rpx;
		background: #F6F7FB;
		border-radius: 32rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.scroll-Y {
		height: calc(100vh - 350rpx);
	}

	.currys-images {
		width: 690rpx;
		height: calc(100vh - 300rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		margin-top: 30rpx;
		border-radius: 32rpx;
	}

	.index1_xq4 {
		position: absolute;
		bottom: -34rpx;
		left: 30rpx;
		width: 630rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 22rpx;
	}

	.index_xq1 {
		width: 196rpx;
		height: 60rpx;
		background: #FF5D5D;
	}

	.index_xq2 {
		width: 196rpx;
		height: 60rpx;
		background: #5282E6;
	}

	.index_xq3 {
		width: 196rpx;
		height: 60rpx;
		background: #06C36E;
	}

	.communicate {
		width: 544rpx;
		height: 80rpx;
		background: #004CFF;
		border-radius: 80rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin-top: 24rpx;
	}

	.currys-salary {
		width: 690rpx;
		min-height: 322rpx;
		background-color: #FFFFFF;
		border-radius: 32rpx;
		padding: 30rpx 30rpx 32rpx 30rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
		position: relative;

	}

	.four {
		flex-wrap: wrap;
	}

	.four .currys-block2_block {
		width: 50% !important;
		margin: 30rpx 0;
	}

	.currys-block2_block {
		width: 185rpx;
		min-height: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.currys-block2 {
		margin-top: 33rpx;
		margin-bottom: 30rpx;
		width: 100%;
		min-height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.currys-block1 {
		width: 100%;
		min-height: 24rpx;
		color: #3D3D3D;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 25rpx;
	}

	.currys-block {
		width: 100%;
		height: 24rpx;
		color: #3D3D3D;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24rpx;
	}

	.curry-citry-bottom {
		width: 100%;
		min-height: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #1D1D1D;
	}

	.curry-line {
		width: 100%;
		height: 8rpx;
		background: #06C36E;
	}

	.curry-citry-countrys {
		width: 100%;
		height: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.curry-citry {
		width: 100%;
		min-height: 146rpx;
		border-radius: 32rpx;
		background: #F6F7FB;
		padding: 25rpx 30rpx 24rpx 30rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
	}

	.curry-block {
		width: 690rpx;
		min-height: 915rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin-top: 24rpx;
		box-sizing: border-box;
		padding: 40rpx 30rpx 30rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.header-item-active {
		width: 315rpx;
		height: 60rpx;
		border-radius: 198rpx 198rpx 198rpx 198rpx;
		text-align: center;
		line-height: 60rpx;
		color: #000000;
		font-size: 24rpx;
	}

	.header-item {
		width: 315rpx;
		height: 60rpx;
		background: #004CFF;
		border-radius: 198rpx 198rpx 198rpx 198rpx;
		text-align: center;
		line-height: 60rpx;
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.curry-content-header {
		width: 690rpx;
		height: 80rpx;
		border-radius: 198rpx;
		background-color: #FFFFFF;
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 20rpx 10rpx 20rpx;
		box-sizing: border-box;
	}

	.curry-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	page {
		width: 100%;
		height: 100%;
		background: #F1F2F4;
	}
</style>